﻿define([
    'Wjs/ui/widgets/fields/FieldBase',
    'Wjs/ui/widgets/fields/TextArea',
    'Wjs/ui/widgets/fields/Button',
    'Wjs/Wjs'
],
function (FieldBase) {
    'use strict';

    var RichTextField = Wjs.defineOnce({
        base: FieldBase,
        construct: function (conf, parent) {
            var me = this;

            RichTextField.base.constructor.call(me, {}, parent); // Use an empty configuration

            // The toolbar with the buttons to change the text
            me.toolbar = me.createChild({
                style: {
                    width: 700,
                    padding: '8px'
                },
                items: [
                    {
                        type: 'Button',
                        text: 'B',
                        clickHandler: function (evt) {
                            var iframe = this.parent.parent.iframe.domEl;
                            iframe.contentDocument.execCommand('bold', false, null);
                        }
                    },
                    {
                        type: 'Button',
                        text: 'U',
                        clickHandler: function (evt) {
                            var iframe = this.parent.parent.iframe.domEl;
                            iframe.contentDocument.execCommand('underline', false, null);
                        }
                    },
                    {
                        type: 'Button',
                        text: 'I',
                        clickHandler: function (evt) {
                            var iframe = this.parent.parent.iframe.domEl;
                            iframe.contentDocument.execCommand('italic', false, null);
                        }
                    },
                    {
                        type: 'Button',
                        text: 'Text Size',
                        clickHandler: function (evt) {
                            var iframe = this.parent.parent.iframe.domEl,
                                size = prompt('Enter a size 1 - 7', '');

                            iframe.contentDocument.execCommand('FontSize', false, size);
                        }
                    },
                    {
                        type: 'Button',
                        text: 'Text Color',
                        clickHandler: function (evt) {
                            var iframe = this.parent.parent.iframe.domEl,
                                color = prompt('Named or hexadecimal color', '');

                            iframe.contentDocument.execCommand('ForeColor', false, color);
                        }
                    },
                    {
                        type: 'Button',
                        text: 'HR',
                        clickHandler: function (evt) {
                            var iframe = this.parent.parent.iframe.domEl;

                            iframe.contentDocument.execCommand('inserthorizontalrule', false, null);
                        }
                    },
                    {
                        type: 'Button',
                        text: 'OL',
                        clickHandler: function (evt) {
                            var iframe = this.parent.parent.iframe.domEl;

                            iframe.contentDocument.execCommand('InsertOrderedList', false, 'newOL');
                        }
                    },
                    {
                        type: 'Button',
                        text: 'UL',
                        clickHandler: function (evt) {
                            var iframe = this.parent.parent.iframe.domEl;

                            iframe.contentDocument.execCommand('InsertUnorderedList', false, 'newUL');
                        }
                    },
                    {
                        type: 'Button',
                        text: 'Link',
                        clickHandler: function (evt) {
                            var iframe = this.parent.parent.iframe.domEl,
                                linkURL = prompt('Enter the URL for this link', 'http://');

                            iframe.contentDocument.execCommand('CreateLink', false, linkURL);
                        }
                    },
                    {
                        type: 'Button',
                        text: 'Unlink',
                        clickHandler: function (evt) {
                            var iframe = this.parent.parent.iframe.domEl;

                            iframe.contentDocument.execCommand('Unlink', false, linkURL);
                        }
                    },
                    {
                        type: 'Button',
                        text: 'Image',
                        clickHandler: function (evt) {
                            var iframe = this.parent.parent.iframe.domEl,
                                imageSrc = prompt('Enter image location', '');

                            if (imageSrc != null) {
                                iframe.contentDocument.execCommand('insertimage', false, imageSrc);
                            }                      
                        }
                    }
                ]
            }, 'View');

            // The text area to transfer the HTML to the server
            me.textarea = me.createChild({
                name: conf.name,
                hidden: true
            }, 'textArea');

            // The iframe to edit the text in HTML
            me.iframe = me.createChild({
                tag: 'iframe',
                width: 700,
                height: 300,
                style: {
                    border: 'black 1px solid'
                },
                renderHandler: function () {
                    var parent = this.parent,
                        el = this.domEl,
                        doc = el.contentDocument;

                    doc.designMode = 'On';

                    doc.body.onblur = function (evt) {
                        var value = doc.body.innerHTML;
                        parent.textarea.setValue(value, {
                            acceptChanges: true, // Do not set the field as modified
                            fireFieldChanged: false // Do not fire the field change event
                        });
                    };
                }
            }, 'View');
        },

        type: 'richTextField'
    });

    return RichTextField;
});